<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="Movie">
        <table>
         <ol>
             <todo-item v-for="item in toDos" v-bind:x=item></todo-item>
             //v-for指令可以绑定数组的数据来渲染项目列表。
             //v-bind指令可将待办项传到循环输出的每个组件中(传值)。
         </ol>  
        </table>
  </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
     <script>
         Vue.component('todo-item',{
             props:['x'],
             template:
             `<tr>
                 <td>
                    <li>{{x.taskName }}</li>
                </td>
             </tr>`
         })
 
         let Movie = new Vue({
             el:'#Movie',
             data(){
                 return{
                     toDos:[
                         {
                             id:1,
                             taskName:'《忠犬八公》'
                         },
                         {
                             id:2,
                             taskName:'《神探笨吉》'
                         },
                         {
                             id:3,
                             taskName:'《怦然心动》'
                         },
                         {
                             id:4,
                             taskName:'《傲慢与偏见》'
                         },
                         {
                             id:5,
                             taskName:'《大圣归来》'
                         },
                         {
                             id:6,
                             taskName:'《冰雪奇缘》'
                         },
                         {
                             id:7,
                             taskName:'《疯狂动物城》'
                         },
                     ]
                 }
             },
         })
     </script>
</body>
</html>